<template>
  <a-card :body-style="{padding: '0px 0px'}" :bordered="false">
    <a-space class="operator">
      <a-button @click="back" type="primary">返回上一页</a-button>
    </a-space>
    <a-form-model ref="form" :model="form" :layout="layout" style="margin-top:24px" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item
        label="权限类型"
        prop="level"
      >
        <a-select v-model="form.level" >
          <a-select-option value="1">
            路由权限
          </a-select-option>
          <a-select-option value="2">
            操作权限
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item
        label="路由规则"
        prop="pid"
        v-if="form.level == 2"
      >
        <a-select v-model="form.pid">
          <a-select-option :value="item.id" v-for="(item,index) in list" :key="index">
            {{item.title}}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item
        label="权限名称"
        prop="title"
      >
        <a-input v-model="form.title" placeholder="请填写用户名" autocomplete="off"/>
      </a-form-model-item>
      <a-form-model-item
        label="路由规则"
        prop="route"
        v-if="form.level == 1"
      >
        <a-input v-model="form.route" placeholder="请填写路由规则" autocomplete="off"/>
      </a-form-model-item>
      <a-form-model-item
        label="权限规则"
        prop="operation"
        v-if="form.level == 2"
      >
        <a-input v-model="form.operation" placeholder="请填写权限规则" autocomplete="off"/>
      </a-form-model-item>
      <a-form-model-item
        label="权限状态"
        prop="status"
      >
        <a-switch v-model="form.status" checked-children="开启" un-checked-children="关闭" default-checked />
      </a-form-model-item>
      <a-form-model-item
        label="自动填充"
        prop="canFull"
        v-if="form.level == 1"
      >
        <a-switch v-model="canFull" checked-children="开启" un-checked-children="关闭" default-checked />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="btn_wrapperCol">
        <a-button type="primary" @click="onSubmit" :loading='loading'>
          提交
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </a-card>
</template>

<script>
import {getAuthPagelist,addPage} from '@/api/modules/permission'
// import {addUser,editUser} from '@/api/modules/setting'
export default {
  name: 'listAdd',  
  props:{
    mod:{
      type:String,
    },
    id:{
      type:[String,Number]
    }
  },
  data () {
    return {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
      btn_wrapperCol:{ span: 13, offset: 7 },
      layout:'horizontal', //'horizontal'|'vertical'
      loading:false,
      form:{
        level:'',
        pid:'',
        title:'',
        operation:'',
        route:'',
        status:true,
      },
      list:[], // 顶级账户列表
      youhuashi:[], // 优化师列表
      typeName:'',
      canFull:true,
      screenWidth: document.body.clientWidth, // 屏幕宽度
      rules:{
        level:[
          {required: true,message: '请选择账号类型', trigger: 'blur'}
        ],
        pid:[
          {required: true,message: '请选择顶级账号', trigger: 'blur'}
        ],
        title:[
          {required: true,message: '请填写权限名称', trigger: 'blur'}
        ],
        operation:[
          {required: true,message: '请填写权限规则', trigger: 'blur'}
        ],
        route:[
          {required: true,message: '请填写路由规则', trigger: 'blur'}
        ],
        status:[
          {required: true,message: '请选择状态', trigger: 'blur'}
        ],
      },
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    this.changeLayout(document.body.clientWidth)
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth
      })()
    }
  },
  methods: {
    getList(){
      const _this = this;
      getAuthPagelist({}).then((res) => {
        _this.list = res.data.filter(e=>e.pid == 0)
        // console.log(_this.list);
      });
    },
    onSubmit(){
      const _this = this;
      this.$refs.form.validate((valid)=>{
        if(valid){
          this.loading = true
          let form = JSON.parse(JSON.stringify(this.form))
          form.status = form.status?1:0
          form.pid = form.pid || 0
          addPage(form).then((res) => {
            if(res.errcode == 0){
              if(this.canFull && form.level == 1 && res.data.insertId){
                this.autoSubmit(res.data.insertId)
              }else{
                this.loading = false
                _this.$message.success('添加成功')
                _this.back()
              }
            }else{
              this.loading = false
              _this.$message.error(res.errmsg)
            }
          }).catch(()=>{
            this.loading = false
          });
        }
      })
    },
    autoSubmit(id){
      // 填充规则，给路由规则自动添加三个常见规则
      let guizeList = ['add', 'edit', 'delete']
      let guizeNameList = ['添加', '编辑', '删除']
      let loop = 0
      for(let idx in guizeList){
        let form = JSON.parse(JSON.stringify(this.form))
        form.level = 2
        form.pid = id
        form.operation = guizeList[idx]
        form.route = ''
        form.title = guizeNameList[idx]
        form.status = 1
        // console.log(form)
        addPage(form).then((res) => {
          if(res.errcode == 0){
            loop++
            if(loop == 3){
              this.loading = false
              this.$message.success('添加成功')
              this.back()
            }
          }
        }).catch(()=>{
          this.loading = false
        });
      }
    },
    back(){
      this.$emit('update:mod','normal')
    },
    changeLayout(e){
      if(e<=750){
        this.layout = 'vertical'
        this.labelCol = {}
        this.wrapperCol = {}
        this.btn_wrapperCol = {}
      }else{
        this.layout = 'horizontal'
        this.labelCol = {span: 7}
        this.wrapperCol = {span: 13}
        this.btn_wrapperCol = { span: 13, offset: 7 }
      }
    },
  },
  watch:{
    'form.level'(){
      this.$refs.form.clearValidate()
    },
    screenWidth(e){
      this.changeLayout(e)
    },
  },
  computed: {
    desc() {
      return this.$t('pageDesc')
    },
    formItemLayout() {
      const layout  = this.layout;
      return layout === 'horizontal'
        ? {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
          }
        : {};
    },
  }
}
</script>

<style scoped>

</style>
